<template>
    <div class="xbody">
        <div class="absolute">
            <el-form ref="form" size="medium" :model="form" label-width="5rem"> <!--:rules="rules" -->
                <h3>报名登记</h3>
                <el-form-item label="" prop="cancerSpecies">
                    <el-select filterable v-model="form.cancerSpecies" @change="selectChange" loading-text default-first-option
                        placeholder="选择您的疾病"  :clearable="true">
                        <el-option style="border-radius: 50px;" v-for="(item, index) in form.cancerSpeciesList" :key="index"
                            :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item  v-if="isAllow" label="" prop="diseases">
                    <el-input v-model="diseases" placeholder="请输入您的疾病" ></el-input>
                </el-form-item>

                <el-form-item label="" prop="phone">
                    <el-input v-model="form.phone" type="number" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="form.code" placeholder="请输入验证码" maxlength="6"></el-input>
                    <div class="codeBtn" @click="codeBtn" :disabled="codeBtnDisabled">{{ buttonText }}</div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" :round="true" class="formButton"
                        @click="submitForm('form')">立即登记</el-button>
                </el-form-item>
            </el-form>
            <!-- <div class="peicg">匹配成功后将收取100元服务费</div> -->
            <!-- <h4 class="text">登记后您将获得</h4> -->
            <div class="text_">
                <div><i class="el-icon-check el-icon-check-color"></i>免费1对1医学老师</div>
                <div><i class="el-icon-check el-icon-check-color"></i>三甲医院免费面诊</div>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name: 'View3',

    data() {
        // 验证手机号
        var phone = (rule, value, callback) => {
            const regex = /^1[3456789]\d{9}$/;
            if (!value) {
                return callback(new Error('手机号不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (!regex.test(value)) {
                        callback(new Error('手机号格式不正确'));
                    } else {
                        callback();
                    }
                }
            }, 200);
        };

        return {
            isAllow:false,//定义创建状态
            codeBtnDisabled: false,
            buttonText: '发送验证码',
            diseases:'',
            form: {
                phone: '',
                cancerSpecies: '',
                code: '',
                cancerSpeciesList: ['癌种1', '癌种1', '癌种3', '癌种4', '癌种5', '其他:请在下方输入']
            },
            codedte: {
                code: "",
                dte:""
            },

            rules: {
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
                phone: [
                    { required: true, validator: phone, trigger: 'blur' },
                ],
                cancerSpecies: [
                    { required: true, message: '请选择癌种', trigger: 'change' }
                ],

            }
        };
    },

    mounted() {

    },

    methods: {
        // 发送验证码
        codeBtn() {
            // 发送验证码
            this.axios.get("/api/wanxin/as/code", {
                params: {
                    codeData:'+86' + this.form.phone
                }
            }).then(res => {
                console.log(res);
                if (res.data.code) {
                    sessionStorage.setItem("code", res.data.code)
                    sessionStorage.setItem("datetime", res.data.datetime)
                    console.log(sessionStorage.getItem("code"), sessionStorage.getItem("datetime"));
                    // 发送验证码
                    Message.success('短信已发送，三分钟有效');
                    if (this.codeBtnDisabled) {
                        // 如果按钮已经禁用，不执行任何操作
                        return;
                    }
                    this.codeBtnDisabled = true
                    let codeTime = 60
                    const timer = setInterval(() => {
                        console.log(codeTime);
                        codeTime--
                        this.buttonText = `${codeTime}秒后重试`;
                        if (codeTime == 0) {
                            clearInterval(timer)
                            this.codeBtnDisabled = false
                            this.buttonText = `发送验证码`;
                        }
                    }, 1000)
                } else {
                    Message.error('短信发送失败');
                }
            }).catch(err => {
                console.log(err);
                Message.error('短信发送失败');
            })
            
        },
        selectChange(value) {
            if (this.form.cancerSpeciesList.length - 1 == value) {
                this.isAllow = true
                return value
            }
            else {
                this.isAllow = false
            }
        },
        submitForm() {
            // 如果这三个有一个没选
            if (!(this.form.code != "" && this.form.phone != "" && this.form.cancerSpeciesList[this.form.cancerSpecies])) {
                // 就报错
                Message.error('请填写完整');

                
            } else {
                // 否则就是这三个都选了
                // 如果这三个都选了,那就判断最后一个选的是不是其他
                const vals = {}
                if ((this.form.cancerSpeciesList.length - 1 == this.form.cancerSpecies)) {//如果选的是其他
                    if (this.diseases == "") {//那么选择其他新出来的字段也不能为空,如果为空，那就是没输入
                        console.log(this.form.cancerSpeciesList.length - 1 == this.form.cancerSpecies,"没输入");
                        Message.error('请填写完整');
                    } else {//如果输入了，就判断是要提交那个字段
                        // this.form.cancerSpecies = this.diseases
                        // Message.success(`需要提交的数据:验证码-${this.form.code},手机号-${this.form.phone},疾病-${this.diseases}`);
                        vals.code = this.form.code
                        vals.phone = this.form.phone
                        vals.disease = this.diseases
                    }
                } else {
                    // Message.success(`需要提交的数据:验证码-${this.form.code},手机号-${this.form.phone},疾病-${this.form.cancerSpeciesList[this.form.cancerSpecies]}`);
                    vals.code = this.form.code
                    vals.phone = this.form.phone
                    vals.disease = this.form.cancerSpeciesList[this.form.cancerSpecies]
                }
                console.log(vals);

                const currentTime = new Date();
                const compareDate = new Date(sessionStorage.getItem("datetime"))
                console.log(currentTime);
                console.log(123);
                console.log(compareDate);

                if (currentTime < compareDate) {
                    console.log("当前时间比他小");
                } else {
                    console.log("当前时间比他大");
                }

                if (vals.code == sessionStorage.getItem("code") && currentTime < compareDate) {
                    // 发送请求
                    delete vals.code
                    this.axios.post("/api/wanxin/as/submsg", vals, {
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    }).then(res => {
                        console.log(res);
                        Message.success("提交成功了")
                        
                        this.form.code = ""
                        this.form.phone = ""
                        this.diseases = ""
                    })
                } else {
                    Message.error("验证码不正确或已过期")
                }


                // this.form.cancerSpeciesList = ['癌种1', '癌种1', '癌种3', '癌种4', '癌种5', '其他:请在下方输入']
            }
        },
    },
};
</script>

<style scoped>
.xbody {
    position: relative;
}

.absolute {
    position: absolute;
    top: 5rem;
    right: 12.5rem;
    width: 17rem;
    height: auto;
    /* margin: 0 auto; */
    background-color: rgb(255, 255, 255);
    border-radius: 0.6rem;
    padding: 0 3.6rem 0 0;
}

.absolute h3 {
    margin: 1rem 0 1.5rem 7.35rem;
    font-size: 1.5rem;
}

.absolute .codeBtn {
    position: absolute;
    top: 0.35rem;
    right: -8px;
    padding-bottom: 0.52rem;
    background-color: transparent;
    cursor: pointer;
    color: #2b91ff;
    border: none;
    font-size: 0.9rem;
}

.absolute .formButton {
    width: 17rem;
    height: 2.9rem;
    font-size: 1.1rem;
    margin: 0 0 0 -3.3rem;
    background-color: #0B77FE;
}

.absolute .peicg {
    width: 100%;
    height: auto;
    color: #333333;
    font-weight: bold;
    margin: -0.6rem 0 0.5rem 3.5rem;
    font-size: 0.9rem;
}

.text {
    color: #333333;
    margin: 0 0 0.3rem 6.2rem;
}

.text_ {
    width: 90%;
    font-size: 0.7rem;
    margin: -0.8rem 0 1rem 3rem;
    justify-content: space-between;
    display: flex;
    color: #666666;
}

.el-icon-check-color {
    color: #0B77FE;
    font-weight: bold;
}</style>